<template>
	<view>
		<view class="user_header" @click="clickUserHeaderView()">
			<image class="user_header_icon" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-83418c8b-2862-4eac-a6ec-bf64544c5621/79dad4f8-af28-4eaf-8180-dd1b18f30102.png" mode="aspectFill"></image>
			<view class="user_header_name">{{ userMobile }}</view>
		</view>
		<view class="user_list">
			<view class="user_list_item" v-for="(item,index) in userList" :key="index" @click="clickItemAtIndex(item)">
				<view class="user_list_item_name"> {{ item.title }} </view>
				<uni-icons type="arrowright" color="#FFFFFF"></uni-icons>
			</view>
		</view>
		<view class="logout_button" v-show="logoutButtonShow" @click="logoutButtonClick()">退出登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userList: [
					{
						"title":"消息中心",
						"page": "../userModel/messageCenter/messageCenter",
						"type": "message"
					},
					{
						"title":"意见反馈",
						"page": "../userModel/feedBack/feedBack",
						"type": "feedback"
					},
					{
						"title":"关于我们",
						"page": "../userModel/aboutUs/aboutUs",
						"type": "about"
					}
				],
				/* 用户的手机号 */
				userMobile: "登录/注册",
				/* 退出登录按钮是否显示 */
				logoutButtonShow: false,
			};
		},
		onLoad:function(options){
			
		},
		onShow:function(options){
			/* 检查用户的登录状态 */
			this.checkUserLoginState();
		},
		methods: {
			/* 每一行的点击方法 */
			clickItemAtIndex(item) {
				if (this.$jmUserInfo.getUserLoginState()) {
					uni.navigateTo({
						url:item.page
					});
				}else {
					if (item.type == "about") {
						uni.navigateTo({
							url:item.page
						});
					}else {
						// 未登录，跳转到登录界面
						this.jumpToLoginPage();
					}
				}
			},
			
			/* 用户的顶部视图点击 */
			clickUserHeaderView() {
				if (this.$jmUserInfo.getUserLoginState()) {
					// 已经登录
				}else {
					// 未登录，跳转到登录界面
					this.jumpToLoginPage();
				}
			},
			
			/* 跳转到登录界面 */
			jumpToLoginPage() {
				uni.navigateTo({
					url:"../loginModel/phoneLogin/phoneLogin"
				});
			},
			
			/* 退出登录按钮点击 */
			logoutButtonClick() {
				var that = this;
				const token = this.$jmUserInfo.getUserToken();
				uniCloud.callFunction({
					name:"uni-id-cf",
					data:{
						action:'logout',
						params:{
							"token": token
						},
					},
					success:function({result}){
						uni.showToast({
							title:"退出登录成功",
							icon:"none"
						})
						/* 退出登录成功 */
						that.$jmUserInfo.removeUserToken();
						that.$jmUserInfo.removeUserTokenExpired();
						/* 改变用户的登录状态 */
						that.checkUserLoginState();
					}
				})
			},
			
			/* 检查用户的登录状态，改变页面的行为 */
			checkUserLoginState() {
				// 判断用户是否登录
				if (this.$jmUserInfo.getUserLoginState()) {
					// 获取用户的登录手机号
					this.userMobile = this.userMobile = this.$jmUserInfo.getUserMobile();
					this.logoutButtonShow = true;
				}else {
					this.userMobile = "登录/注册";
					this.logoutButtonShow = false;
				}
			},
			
			
		}
	}
</script>

<style lang="scss">
	.user_header {
		display: flex;
		align-items: center;
		background-color: #333333;
		margin: 30rpx 30rpx 0 30rpx;
		border-radius: 10rpx;
		height: 200rpx;
	}
	
	.user_header_icon {
		width: 150rpx;
		height: 150rpx;
		border-radius: 75rpx;
		margin-left: 30rpx;
	}
	
	.user_header_name {
		margin-left: 30rpx;
		color: #FFFFFF;
	}
	
	.user_list {
		background-color: #333333;
		margin: 30rpx;
		border-radius: 10rpx;
	}
	.user_list_item {
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 30rpx 0 30rpx;
	}
	
	.user_list_item_name {
		color: #FFFFFF;
		font-size: 36rpx;
	}
	
	.logout_button {
		margin: 150rpx 50rpx 0 50rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: #ff4040;
		font-size: 30rpx;
	}
	
</style>

<!-- getWeixinCode() {
			      return new Promise((resolve, reject) => {
			        // #ifdef MP-WEIXIN
			        uni.login({
			          provider: 'weixin',
			          success(res) {
			            resolve(res.code)
			          },
			          fail(err) {
			            reject(new Error('微信登录失败'))
			          }
			        })
			        // #endif
			        // #ifdef APP-PLUS
			        weixinAuthService.authorize(function(res) {
			          resolve(res.code)
			        }, function(err) {
			          console.log(err)
			          reject(new Error('微信登录失败'))
			        });
			        // #endif
			      })
			    },
			
			testLoginByWx() {
				
				this.getWeixinCode().then((code)=>{
					let params = {
						code:code
					}
					return uniCloud.callFunction({
					          name: 'uni-id-cf',
					          data: {
								  action: "loginByWeixin",
					            params
					          }
					    })
				}).then((res)=>{
					console.log(res);
				}).catch((e)=>{
					console.log(e);
				});
			},

			
			
			testRegister() {
				let params = {
					username: "test01",
					password: "123456"
				}
				uniCloud.callFunction({
					name:"uni-id-cf",
					data:{
						action:'register',
						params,
					},
					success: ({result}) => {
						console.log(result);
						if(result.code === 0){
							console.log("注册成功");
						}else{
							uni.showModal({
								content: result.msg,
								showCancel: false
							});
						}
					}
				});
			},
			testLogin() {
				let params = {
					username: "test01",
					password: "1234567"
				}
				uniCloud.callFunction({
					name:"uni-id-cf",
					data:{
						action:'login',
						params,
					},
					success: ({result}) => {
						console.log(result);
						if(result.code === 0){
							console.log("登录成功");
						}else{
							uni.showModal({
								content: result.msg,
								showCancel: false
							});
						}
					}
				});
			} -->
